import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';

import { useShowBar } from '../../hooks/useTabbar';

import style from './css/index.module.css';

export default function Films() {
  const { showBar } = useShowBar();
  return (
    <>
      {showBar && (
        <>
          <div className={style.swiper}>Film 轮播</div>
          <ul className={style.navbar}>
            <li>
              <NavLink to="/film/nowPlaying">正在热映</NavLink>
            </li>
            <li>
              <NavLink to="/film/comingSoon">即将上映</NavLink>
            </li>
          </ul>
        </>
      )}

      <Outlet />
    </>
  );
}
